<!DOCTYPE html>
<html>
<head>
    <title>管理公告信息</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/assets/css/checkbox.css" media="all">
</head>
<body>
<form class="layui-form layui-card-body" style="margin-top: -10px;margin-left: -15px">
    <div class="layui-input-inline">
        <input type="text" name="title" id="announcementsId" placeholder="公告ID" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <input type="text" name="title" id="title" placeholder="标签" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <select name="isRelease" id="isRelease">
            <option value="">是否发布</option>
            <option value="0">未发布</option>
            <option value="1">已发布</option>
        </select>
    </div>
    <button type="button" class="layui-btn" id="search">查询</button>
    <button type="button" class="layui-btn" id="reset">重置</button>
    <button type="button" class="layui-btn" id="add">新增公告</button>
</form>
<table id="announceList" lay-filter="test" style="margin-top: -10px"></table>
<script src="/static/assets/layui.js" charset="utf-8"></script>
<script src="/static/assets/jquery.min.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行</button>
    </div>
</script>

<script>
    $(function () {
        layui.use(['table', 'form'], function () {
            var table = layui.table,
                form = layui.form;
            //第一个实例
            table.render({
                elem: '#announceList'
                , url: '/announcement/showAll' //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , method: 'post'
                , title: '公告信息表'
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'announcementsId', title: 'ID', sort: true}
                        , {field: 'title', title: '标题'}
                        , {field: 'expirydDate', title: '失效日期', sort: true}
                        , {field: 'releaseTime', title: '发布日期', sort: true}
                        , {
                        field: 'releaseState', title: '是否发布',
                        templet: function (d) {
                            var state = "";
                            if (d.releaseState) {
                                state = "<input type='checkbox' value='" + d.announcementsId + "' id='status' lay-filter='status' checked='checked' name='status'  lay-skin='switch' lay-text='发布|撤回' >";
                            } else {
                                state = "<input type='checkbox' value='" + d.announcementsId + "' id='status' lay-filter='status'  name='status'  lay-skin='switch' lay-text='发布|撤回' >";
                            }
                            return state;
                        }
                    }
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
                    ]
                ]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data.Announcements//解析数据列表
                    };
                }
                , page: true //开启分页
                , id: "announceList"
            });

            $("#search").on("click", function () {
                var announcementsId = $("#announcementsId").val()
                var title = $("#title").val()
                var isRelease = $("#isRelease").val()
                table.reload('announceList', {
                    where: { //设定异步数据接口的额外参数，任意设
                        announcementsId: announcementsId,
                        title: title,
                        isRelease: isRelease
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })

            $("#reset").on("click", function () {
                location.reload()
            })

            $("#add").on("click", function () {
                layer.open({
                    type: 2,
                    title: '新增公告',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['650px', '500px'],
                    content: '/desk/addAnnounce' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            })
            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        layer.msg("删除成功")
                        $.ajax({
                            url: "/announcement/deleteAnnouncement",
                            type: "post",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({announcementsId: [data.announcementsId]}),
                            success: function (data) {
                                console.log("删除成功")
                                console.log(data)
                                table.reload('announceList', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            },
                            error: function () {
                                console.log("删除失败")
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        area: ['650px', '550px'],
                        content: ['/desk/announceDetails?announcementsId=' + data.announcementsId] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                }
            });
            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        console.log(data)
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;
            });
            //监听开关
            form.on('switch(status)', function (data) {
                // 得到开关的value值，实际是需要修改的ID值。
                console.log("开关：" + data.value)
                var id = data.value;
                console.log(id);
                var status = this.checked ? '1' : '0';
                console.log(status)
                var index;
                $.ajax({
                    type: 'POST',
                    url: '/announcement/update',
                    data: {"announcementsId": id, "releaseState": status},
                    beforeSend: function () {
                        index = layer.msg('正在切换中，请稍候', {icon: 16, time: false, shade: 0.8});
                    },
                    error: function (data) {
                        console.log(data);
                        layer.msg('数据异常，操作失败！');
                    },
                    success: function (data) {
                        if (data.code === 200) {
                            setTimeout(function () {
                                layer.close(index);
                                layer.msg('操作成功！');
                            }, 1000);
                        } else {
                            console.log(data);
                            layer.msg('数据异常，操作失败！');
                        }
                    },
                    dataType: 'JSON'
                });
            });

        });
    })

</script>
</body>
</html>
